<template>
    <div class='icons'>
        <swiper :options="swiperOption">
            <swiper-slide v-for='(page,index) of pages' :key='index'>
                <div class='icon' v-for='item of page' :key='item.id'>
                    <div class='icon-img'>
                        <img :src="item.iconsrc" class="icon-imgcontent">
                    </div>
                    <p class="icon-desc">{{item.icondesc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
    export default{
        name: 'HomeIcons',
        props: {
            iconlist: Array
        },
        data: function (){
            return {
                swiperOption: {
                    autoplay: false
                }
            }
        },
        computed: {
            pages () {
                const pages = [];
                this.iconlist.forEach( (item,index) => {
                    const page = Math.floor( index / 8 )
                    if(!pages[page]){
                        pages[page] = []
                    }
                    pages[page].push(item)
                })
                return pages
            }
            
        }
    }
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
    .icons >>> .swiper-wrapper
        width: 100%
        height: 0
        padding-bottom: 50%
    .icons
        width: 100%
        height: 0
        overflow: hidden
        padding-bottom: 50%
        margin-top: .1rem
        .icon
            width: 25%
            height: 0
            overflow: hidden
            padding-bottom: 25%
            float: left 
            position: relative
            .icon-img
                position: absolute
                top: 0
                left: 0
                right: 0
                bottom: .44rem
                text-align: center
                box-sizing: border-box
                padding: .1rem
                .icon-imgcontent
                    height: 100%
                    display: block
                    margin: 0 auto
            .icon-desc
                position: absolute
                left: 0
                right: 0
                bottom: 0
                color: $darkTextColor
                text-align: center
                ellipsis()

        // .icon
         //     width: 25%
         //     height: 0
         //     overflow: hidden
         //     padding-bottom: 25%
        //     float: left
         //     text-align: center
         //     .icon-img
         //         width: .9rem
         //         height: .9rem
       //         margin-top: .1rem
         //     .icon-p
         //         width: 100%
         //         color: #000
        //         font-size: .24rem
         //         margin-top: .1rem
</style>
        